<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>备忘录（试作型）</title>
    <link rel="stylesheet" href="./resources/main.css">
</head>

<body>
    <div id="app">
        <div id="main_div">
            <div id="title">备忘录（试作型）</div>
            <div id="uncompleted_div">
                <h2 id="uncompleted_title">未完成任务</h2>
                <div id="uncompleted_list">
                    <div class="uncompleted_item" >
                        <table>
                            <tr>
                                <th class="uncompleted_item_index">序号</th>
                                <th class="uncompleted_item_content">内容</th>
                                <th class="uncompleted_item_deadline">预计完成时间</th>    
                                <th class="uncompleted_item_operation">操作</th>
                            </tr>
                            <tr v-for="(item, index) in uncompleted_task" :key="item.id">
                                <td>{{index + 1}}</td>
                                <td>{{item.task_content}}</td>
                                <td>{{item.task_time}}</td>
                                <td>
                                    <button @click="complete_task_func(item.id)">完成</button>
                                    <button @click="del_task_func(item.id, item.task_status)">删除</button>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>

            <div id="add_div">
                <div id="new_task_content_input">
                    <input type="text" name="new_task_content" placeholder="请输入任务内容" v-model="new_task_content">
                </div>
                <div id="new_task_deadline_input">
                    <input type="date" id="new_task_deadline" name="new_task_deadline" min="2011-01-01" max="2030-12-31" v-model="new_task_deadline">
                </div>
                <button @click="add_task_func()">添加任务</button>
            </div>

            <div id="completed_div">
                <h2 id="completed_title">已完成任务</h2>
                <div id="completed_list">
                    <div class="completed_item">
                        <table>
                            <tr>
                                <th class="completed_item_index">序号</th>
                                <th class="completed_item_content">内容</th>
                                <th class="completed_item_deadline">完成时间</th>
                            </tr>
                            <tr v-for="(item, index) in completed_task" :key="id">
                                <td>{{index + 1}}</td>
                                <td>{{item.task_content}}</td>
                                <td>{{item.task_time}}</td>
                                <td>
                                    <button @click="del_task_func(item.id, item.task_status)">删除</button>
                                </td>
                            </tr>
                        </table>

                    </div>
                </div>
            </div>
        </div>
    </div>



    </div>



    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="./src/main.js"></script>
</body>

</html>